<!-- 文章页面，管理文章：编辑、新增 -->
<template>
    <div class="main-container">
        <div class="title">
            <h2>{{words.title}}</h2>
            <router-link :to="{path:'/article-mng',query:{columnId:article.columnId}}" class="pull-right">返回文章管理>></router-link>
        </div>
        <el-form ref="form" :model="article" label-width="80px">
            <el-form-item label="文章標題:">
                <el-input v-model="article.title"></el-input>
            </el-form-item>
            <el-form-item label="副标题:">
                <el-input v-model="article.subTitle"></el-input>
            </el-form-item>
            <el-form-item class="thumb" label="縮略圖:">
                <el-input v-model="article.firstUrl"></el-input>
                <div class="btn-browser">上传缩略图</div>
                <div class="file-info">
                    <span class="name"></span>
                    <span class="state"></span>
                </div>
                <img v-if="article.firstUrl" :src="article.firstUrl" />
            </el-form-item>
            <el-form-item label="所屬欄目:">
                <select-tree ref="iSelectTree"
                    v-model="article.columnId"
                    :data="columnTreeData"
                    :props="{label: 'columnName', children: 'children', nodeKey: 'id'}">
                </select-tree>
            </el-form-item>
            <el-form-item label="文章內容:">
                <ueditor v-model="article.content"></ueditor>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSubmit">{{words.btn}}</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import ueditor from '../components/ueditor.vue';
import '../../../node_modules/webuploader/dist/webuploader.css';
import WebUploader from 'webuploader';
export default {
    components: {
        ueditor
    },
    mounted() {
        this.init();
    },
    data() {
        return {
            // 编辑页面有这个值
            articleId: '',
            article: {
                title: '',
                subTitle: '',
                content: '',
                // author: '',
                columnId: '',
                columnName: '',
                firstUrl: ''
            },
            columnTreeData: [],
            pageType: 'add'
        };
    },
    computed: {
        words() {
            return this.pageType === 'edit' ? {
                title: '编辑文章',
                btn: '保存'
            } : {
                title: '新增文章',
                btn: '增加'
            }
        }
    },
    methods: {
        init() {
            /**
             * 此页面处理两类内容
             * 1 编辑文章，传入articleId
             * 2 新增文章，如果传入columnId，则初始化下拉树
             */
            let columnId = +this.$route.query.columnId;
            let articleId = +this.$route.query.articleId;
            let columnName = this.$route.query.columnName;
            this.article.columnName = columnName ? columnName : '';
            this.getColumnTree().done(() => {
                this.article.columnId = columnId;
            });
            if (articleId) {
                this.pageType = 'edit';
                this.getArticleById(articleId);
            }
            this.initUploader();
        },
        initUploader: function () {
            let me = this;
            let $state = $('.file-info .state');
            let $name = $('.file-info .name');
            let uploader = WebUploader.create({
                server: '/article/firstImageUpload.do',
                pick: '.btn-browser',
                resize: false
            });
            uploader.on('fileQueued', function (file) {
                me.fileId = file.id;
                $name.html(file.name);
                uploader.upload(me.fileId);
            });
            uploader.on('uploadProgress', function (file, percentage) {
                $state.html('<span class="uplaoding">上傳中---'
                    + '<i class="el-icon-loading"></i></span>');
            });
            uploader.on('uploadSuccess', function (file, res) {
                me.article.firstUrl = res.data;
                let strHtml = '<span class="success">上傳成功</span>';
                $state.html(strHtml);
            });
            uploader.on('uploadError', function (file, res) {
                $state.html('<span class="error">上傳出錯</span>');
            });
        },
        getColumnTree() {
            return $.request('/column/getColumnTrees.do').then(res => {
                this.columnTreeData = res.data;
            });
        },
        getArticleById(articleId) {
            return $.request('/article/getArticleById.do', {
                data: {id: articleId}
            }).then(res => {
                $.extend(this.article, res.data);
            });
        },
        handleSubmit() {
            let funcName = {
                add: 'addArticle',
                edit: 'updateArticle'
            };
            this[funcName[this.pageType]]();
        },
        // 新增文章
        addArticle() {
            $.request('/article/addArticle.do', {
                data: this.article,
                method: 'post'
            }).then((res) => {
                this.$confirm('增加文章成功！你可以選擇繼續添加或者返回文章列表', '提示', {
                    confirmButtonText: '返回列表',
                    cancelButtonText: '繼續添加',
                    type: 'success'
                }).then(() => {
                    this.$router.push('article-mng');
                }).catch(() => {
                    this.resetArticle();
                });
            });
        },
        // 更新文章
        updateArticle() {
            $.request('/article/updateArticle.do', {
                data: this.article,
                method: 'post'
            }).then((res) => {
                this.$message({message: '保存成功', type: 'success'});
            });
        },
        resetArticle() {
            this.$router.go(0);
        }
    }
}
</script>
<style lang="less">
    .btn-browser {
        display: inline-block;
        vertical-align: middle;
        margin: 0;
        .webuploader-pick {
            padding: 0 12px;
            display: block;
            box-sizing: border-box;
            height: 34px;
            border-radius: 2px;
        }
    }
    .thumb {
        img {
            max-width: 200px;
        }
        .webuploader-container {
            margin: 6px 0;
        }
    }
    .file-name {
        display: inline-block;
        min-width: 150px;
    }
</style>
